<template>
	<view class="rf-loupan-list">
		<view class="rf-loupan-list-container">
			<block v-for="(item, index) in list" :key="index">
				<!--列表-->
				<view
					v-if="(index + 1) % 2 !== 0 || isList"
					class="rf-loupan-item"
					@tap.stop="navTo(`/pages/house/detail?id=${item.id}`)"
					:class="[isList ? 'rf-loupan-flex-list' : '']"
					hover-class="hover"
					:hover-start-time="150"
				>
					<view class="rf-loupan-image-wrapper">
						<image :src="item.thumb" mode="widthFix" :preview="false" :class="[isList?'rf-loupan-list-img':'rf-loupan-img']" ></image>
						<text class="sketch in1line">{{ item.catname }}</text>
						
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.title }}</view>
						<view class="rf-pro-pay">
							<text
								>
								{{ item.areaname }}|{{ item.address }}</text
							>
							
						</view>
						
						<view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price" :class="'text-'+themeColor.name">
									<text :class="'text-'+themeColor.name" class="rf-factory-price">均价:</text>
									{{ item.price }}</text>
								
							</view>
							
						</view>
					</view>
				</view>
				<!--列表-->
			</block>
		</view>
		<view class="rf-loupan-list-container" v-if="!isList">
			<block v-for="(item, index) in list" :key="index">
				<!--列表-->
				<view
					v-if="(index + 1) % 2 === 0"
					class="rf-loupan-item"
				@tap.stop="navTo(`/pages/house/detail?id=${item.id}`)"
					:class="[isList ? 'rf-loupan-flex-list' : '']"
					hover-class="hover"
					:hover-start-time="150"
				>
					<view class="rf-loupan-image-wrapper">
						<image :src="item.thumb" mode="widthFix" :preview="false" :class="[isList?'rf-loupan-list-img':'rf-loupan-img']" ></image>
						<text class="sketch in1line">{{ item.catname }}</text>
						
					</view>
					<view class="rf-pro-content">
						<view class="rf-pro-tit">{{ item.title }}</view>
						<view class="rf-pro-pay">
							<text
								>
								{{ item.areaname }}|{{ item.address }}</text
							>
							
						</view>
						<view v-if="item">
							<view class="rf-pro-price">
								<text class="rf-sale-price" :class="'text-'+themeColor.name">
								<text :class="'text-'+themeColor.name" class="rf-factory-price">均价:</text>
								{{ item.price }}</text>
							
							</view>
							
						</view>
					</view>
				</view>
				<!--列表-->
			</block>
		</view>
		
		
	</view>
</template>
<script>
/**
 * @des 列表
 *
 * @author stav stavyan@qq.com
 * @date 2020-05-15 10:49
 */
import { loupanDetail } from '@/api/equipment';
 
import $mAssetsPath from '@/config/assets.config';
import { mapMutations } from 'vuex';
export default {
	name: 'rfHouseList',
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否以列表展示 | 列表或大图
		isList: {
			type: Boolean,
			default: false
		},
		// 是否以列表展示 | 列表或大图
		bottom: {
			type: Number,
			default: 0
		}
	},
	components: {
		
	},
	data() {
		return {
			specClass: 'none',
    
			loupanDetail: {}
		};
	},
	
	methods: {
   
		// 跳转详情
		navTo(route) {
			this.$mRouter.push({ route });
		},
		// 获取详情
		async getHouseDetail(row) {
			await this.$http
				.get(`${loupanDetail}`, {
					id: row.id
				})
				.then(async r => {
					this.loupanDetail = await r.data;
				
					this.specClass = 'show';
				});
		}
		
	}
};
</script>
<style scoped lang="scss">
	
	// 通用列表
	.rf-loupan-list {
		background-color: $page-color-base;
		//padding: 0 $spacing-sm;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		
		    padding-right: 13px;
		    padding-bottom: 13px;
		    padding-left: 13px;
		.rf-loupan-list-container {
			flex: 1;
			margin-right: 10upx;
		}
		.rf-loupan-list-container:last-child {
			margin-right: 0;
		}
		.rf-loupan-item {
			width: 100%;
			margin-bottom: 20upx;
			
			box-sizing: border-box;
			background: $color-white;
			border-radius: 12upx;
			overflow: hidden;
			transition: all 0.15s ease-in-out;
		}
		.rf-loupan-list-item {
			width: 48vw;
		}
		.rf-loupan-flex-list {
			display: flex;
			margin-bottom: 10upx !important;
		}
		.rf-loupan-image-wrapper {
			border-radius: 6upx;
			overflow: hidden;
			position: relative;
			.rf-loupan-img {
				width: 100%;
				height: 133px !important;
				border-radius: 12upx;
				display: block;
			}
			
			.sketch {
				width: 100%;
				background-color: rgba(0, 0, 0, 0.4);
				position: absolute;
				border-bottom-left-radius: 6upx;
				bottom: 0;
				padding: 0 8upx;
				right: 0;
				color: #fff;
				font-size: $font-sm;
			}
			.triangle-wrapper {
				border-top-left-radius: 6upx;
				position: absolute;
				overflow: hidden;
				top: 0;
				left: 0;
				.triangle-tag {
					width: 64upx;
					height: 64upx;
				}
			}
		}
		
		
		
		.rf-pro-content {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20upx;
			.rf-pro-tit {
				//height: 78upx;
				color: #2e2e2e;
				font-size: 30upx;
				word-break: break-all;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
			}
			.rf-pro-price {
				padding-top: 18upx;
			}
			.rf-sale-price {
				font-size: 34upx;
				font-weight: 500;
				color: #FF4A4A;
			}
			.rf-factory-price {
				font-size: 24upx;
				//color: #a0a0a0;
				//text-decoration: line-through;
				padding-left: 12upx;
			}
			.rf-pro-pay {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 10upx;
				font-size: 24upx;
				    overflow: hidden;
				    text-overflow: ellipsis;
					display: -webkit-box;
					    -webkit-box-orient: vertical;
					    -webkit-line-clamp: 1;
				color: #999;
				.iconfont {
					font-size: $font-lg + 6upx;
					padding: 0 $spacing-sm;
				}
			}
		}
	}
	
	
</style>
